<template>
  <div>
    <div class="user-center">
      <div class="header">
        <img :src="userInfo.headimgurl" ref="headImg" alt="头像" class="head-img">
        <div class="info">
          <div class="user-name">{{userInfo.name}}</div>
          <div class="credit-score">
            <img src="/src/assets/user-center/hui.svg" @click="showHui" v-if="isReportMan">
            <img :src="`/src/assets/user-center/score-${userLevel(walletInfo.credit_score)}.svg`" @click="showPopup">
            <span>{{walletInfo.credit_score_level}}</span>
          </div>
        </div>
        <div class="group-btn">
          <mt-button class="orange" @click.native="$router.push({name: 'SignIn'})">
            <img src="/src/assets/user-center/calendar.png" slot="icon">
            每日签到
          </mt-button>
        </div>
      </div>
      <div class="wallet" @click="$router.push({name: 'Wallet'})">
        <div class="title">
          <img src="/src/assets/user-center/package.png">
          我的钱包
        </div>
        <div class="info">
          <div class="item">
            <span>可提现账户余额：</span>
            <span class="money">{{walletInfo.balance_amount}}</span>
          </div>
          <div class="v-line"></div>
          <div class="item">
            <span>冻结账户余额：</span>
            <span class="money">{{walletInfo.frozen_amount}}</span>
          </div>
        </div>
      </div>
      <!-- tab菜单 -->
      <mt-navbar v-model="selected">
        <mt-tab-item v-for="v in tabMenu" :id="v.id" :key="v.id" class="navbar">
          {{v.menu}}
        </mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item v-for="v in tabMenu" :id="v.id" :key="v.id">
          <div class="item"
            v-for="(x, i) in v.sub" :key="i"
            @click="$router.push({name: x.pathName, params: {tab: i + 1}, query: {home: $route.query.home}})"
          >
            <mt-badge color="rgb(255, 89, 22)" v-if="x.badge">{{x.badge}}</mt-badge>
            <img :src="x.icon" alt="图标">
            <span class="name">{{x.name}}</span>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
      <div class="line"></div>
      <transition-group name="list">
        <mt-cell v-for="(v, k) in cellList" 
          :key="k" 
          :title="v.title"
          :value="v.value"
          @click.native="$router.push({name: v.pathName})"
          v-if="!v.hide"
          is-link>
          <img :src="v.icon" slot="icon">
        </mt-cell>
      </transition-group>
      <!-- 帮助提示 -->
      <mt-popup v-model="popupVisible" position="middle">
        <div class="block">
          <div class="title">信用分说明</div>
          <div class="text">目前您的信用分：{{walletInfo.credit_score}}分！</div>
          <table cellpadding="0" cellspacing="0" width="100%">
              <tr><td>等级</td><td>积分数量</td></tr>
              <tr><td>0 - 300分</td><td>婴儿</td></tr>
              <tr><td>300 - 550分</td><td>平民</td></tr>
              <tr><td>550 - 750分</td><td>贵族</td></tr>
              <tr><td>750 - 1000分</td><td>皇族</td></tr>
          </table><br>
          <p>Q：信用分是什么？</p>
          <p>A：信用分是惠权益用户活跃度和积极性的体现，也是平台用户身份的象征，按不同分数，用户可分为皇族、贵族、平民和婴儿等阶层。</p><br>
          <p>Q：如何获取信用分？</p>
          <p>A：提升信用分有两个渠道：</p>
          <p>第一，是在平台上做交易，按照出售的笔数和金额，经过运算，系统会赋予用户相应的信用分值，多交易、多累积；</p>
          <p>第二，是为平台邀请新用户，按照邀请用户数量和被邀>请用户未来的交易表现，系统会赋予用户相应的信用分值，多邀请、多累积。</p></br>
          <p>Q：何种情况信用分会降低？</p>
          <p>A：请注意，任何不诚信的行为，包含卖方售假和买方虚报纠纷，一经核实，都会使自身信用分降低。信用分低于系统下限时，我们将停止为该用户提供任何服务。</p><br>
          <p>Q：高信用分用户有什么待遇？</p>
          <p>A：高信用分的好处将体现在各个方面，目前来讲主要有以下两点：</p>
          <p>第一，高分高阶用户将享受到卖出权益售价上浮的优待（收益上浮部分由平台承担，不会侵占买方权利）；</p>
          <p>第二，平台将于近期推出>高分高阶用户专享的自由交易市场，为一些小众的、不方便由平台收购的、直接面对用户的权益提供交易渠道，请注意，自由交易市场仅限高分高阶用户出售和购买相应权益，只有高分高阶用户才能享受到自由交易的实惠和便利。</p>
        </div>
        <mt-button @click.native="closePupup">我已了解</mt-button>
      </mt-popup>
      <!-- 惠大使 -->
      <mt-popup v-model="huiVisible" position="middle">
        <div class="block">
          <div class="title">惠大使勋章</div>
          <div class="text">恭喜您，自{{beReportManTime}}起，您已经成为“惠大使”成员！享有“线报爆料、赢取奖励”的权利！</div>
          <div class="text">您最近的爆料奖励如下</div>
          <!-- 爆料奖励列表 -->
          <div class="report-card"
            v-for="v in reportList" :key="v.id"
          >
            <div class="card-head">
              <span class="time">{{v.add_time}}</span>
              <span class="word">{{v.name}}</span>
            </div>
            <div class="card-footer">{{v.desc}}</div>
          </div>
        </div>
        <mt-button @click.native="closeHui">我已了解</mt-button>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'UserCenter',
    data () {
      return {
        popupVisible: false,
        huiVisible: false,
        selected: 1,
        defaultImg: '/src/assets/error.png',
        tabMenu: {
          buy: {
            id: 1,
            menu: '我的买单',
            sub: [
              {icon: '/src/assets/user-center/for-pay.png', name: '待支付', pathName: 'Buy'},
              {icon: '/src/assets/user-center/to-use.png', name: '待使用', pathName: 'Buy'},
              {icon: '/src/assets/user-center/used.png', name: '已完成', pathName: 'Buy'},
              {icon: '/src/assets/user-center/dispute.png', name: '纠纷中', pathName: 'Buy'}
            ]
          },
          sell: {
            id: 2,
            menu: '我的卖单',
            sub: [
              {icon: '/src/assets/user-center/selling.png', name: '出售中', pathName: 'Sell'},
              {icon: '/src/assets/user-center/off-shelf.png', name: '已下架', pathName: 'Sell'},
              {icon: '/src/assets/user-center/used.png', name: '已出售', pathName: 'Sell'},
              {icon: '/src/assets/user-center/dispute.png', name: '纠纷中', pathName: 'Sell'}
            ]
          }
        },
        cellList: [],
        userInfo: {},
        walletInfo: {},
        reportList: [],
        // 是否惠大使
        isReportMan: false,
        beReportManTime: '',
        // 是否券商
        isTrader: false
      }
    },
    methods: {
      showPopup () {
        this.popupVisible = true
      },
      closePupup () {
        this.popupVisible = false
      },
      showHui () {
        this.huiVisible = true
      },
      closeHui () {
        this.huiVisible = false
      },
      userLevel (score) {
        if (score < 300) {
          return 1
        } else if (score >= 300 && score < 550) {
          return 2
        } else if (score >= 550 && score < 750) {
          return 3
        } else if (score >= 750) {
          return 4
        }
      },
      getUserInfo () {
        this.$post('/vue/my/user_info').then(data => {
          this.userInfo = data
          // 头像加载错误是显示错误图片
          this.$refs.headImg.onerror = () => {
            this.userInfo.headimgurl = this.defaultImg
          }
        })
      },
      getInfo () {
        this.$post('/vue/my/index').then(data => {
          this.walletInfo = data.wallet_info
          this.tabMenu.buy.sub[0].badge = data.my_buy_info.to_pay_amount
          this.tabMenu.buy.sub[1].badge = data.my_buy_info.to_use_amount
          this.tabMenu.buy.sub[2].badge = data.my_buy_info.alredy_use_amount
          this.tabMenu.buy.sub[3].badge = data.my_buy_info.buy_dispute_amount
          this.tabMenu.sell.sub[0].badge = data.my_sell_info.selling_amount
          this.tabMenu.sell.sub[1].badge = data.my_sell_info.stop_sell
          this.tabMenu.sell.sub[2].badge = data.my_sell_info.sold_amount
          this.tabMenu.sell.sub[3].badge = data.my_sell_info.sell_dispute_amount
          // 调换买卖按钮
          if (data.menu_show === 'sell') {
            let tmp = {
              sell: this.tabMenu['sell'],
              buy: this.tabMenu['buy']
            }
            this.selected = this.tabMenu['sell'].id
            this.tabMenu = tmp
          }
          // 惠币
          for (let i = 0; i < this.cellList.length; i++) {
            if (this.cellList[i].title === '惠币商城') {
              this.cellList[i].value = `${data.hui_coin} 惠币`
            }
          }
        })
      },
      getHuiList () {
        this.$post('/vue/report/report_man_alert').then(data => {
          this.beReportManTime = data.add_time
          this.isReportMan = data.is_report_man
          this.reportList = data.list
        })
      },
      checkIsTrader () {
        this.$post('/vue/my/cooperation').then(data => {
          let isHide = false
          if (data === 'yes') {
            isHide = false
          } else {
            isHide = true
          }
          for (let i = 0; i < this.cellList.length; i++) {
            if (this.cellList[i].title === '提货记录') {
              this.cellList[i].hide = isHide
            }
          }
        })
      }
    },
    mounted () {
      // 功能
      this.cellList = [
        {title: '我的成就', icon: '/src/assets/user-center/achieve.png', pathName: 'Achieve'},
        {title: '提货记录', icon: '/src/assets/user-center/take.png', pathName: 'TakeGoodsRecord', hide: true},
        {title: '惠币商城', icon: '/src/assets/user-center/shop.png', pathName: 'Mall'},
        {title: '提醒设置', icon: '/src/assets/user-center/remind.png', pathName: 'Setting'},
        {title: '我的邀请', icon: '/src/assets/user-center/inviting.png', pathName: 'Invite', value: '邀请赚分润'},
        {title: '帮助中心', icon: '/src/assets/user-center/helper.png', pathName: 'Helper'},
        {title: '意见反馈', icon: '/src/assets/user-center/feedback.png', pathName: 'FeedBack'}
      ]
      // 获取个人信息
      this.getUserInfo()
      this.getInfo()
      // 获取是否惠大使及爆料奖励
      this.getHuiList()
      // 是否券商
      this.checkIsTrader()
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
  .flex {
    display: flex;
    align-items: center;
    align-content: flex-start;
    justify-content: space-between;
  }
  .user-center {
    width: 100%;
    text-align: left;
    background: #FFF;
    padding-bottom: 58px;
    height: calc(~'100vh - 58px');
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .header {
      padding: 12px 12px 30px;
      background: linear-gradient(to right, rgb(47, 134, 225), rgb(165, 134, 255));
      border-bottom-left-radius: 100% 40%;
      border-bottom-right-radius: 100% 40%;
      &:extend(.flex);
      .head-img {
        width: 56px;
        height: 56px;
        flex: 0 0 auto;
        border-radius: 100%;
      }
      .info {
        flex: 0 0 auto;
        margin: 0 12px;
        width: 52vw;
        .user-name {
          font-size: 13px;
          font-weight: bold;
          line-height: 24px;
          color: #FFF;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .credit-score {
          font-size: 12px;
          line-height: 24px;
          color: #FFF;
          display: flex;
          align-content: center;
          align-items: center;
          span {
            width: 36px;
            font-size: 10px;
            line-height: 16px;
            background-color: rgba(102, 102, 102, 0.2);
            border-radius: 8px;
            text-align: center;
          }
          img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
        }
      }
      .group-btn {
        margin-right: -12px;
        flex: 0 0 auto;
        width: 23.5vw;
        button {
          display: block;
          width: 100%;
          height: 24px;
          color: #FFF;
          font-size: 12px;
          line-height: 24px;
          margin-bottom: 8px;
          border-top-left-radius: 16px;
          border-bottom-left-radius: 16px;
          padding: 0;
          display: flex;
          align-items: center;
          align-content: center;
          justify-content: center;
          .mint-button-icon {
            line-height: 0;
          }
          &.blue {
            background: linear-gradient(to right, rgb(47, 134, 225) , rgb(165, 134, 255));
          }
          &.orange {
            background-image: url('/src/assets/user-center/sign-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            img {
              width: 18px;
              height: 18px;
              margin-right: 3px;
            }
          }
        }
      }
    }
    .wallet {
      margin: 12px;
      // height: 100px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      box-shadow: 0 2px 6px 0 rgba(169, 169, 169, 0.5);
      .title {
        padding: 4px 12px;
        color: @c-124;
        text-align: center;
        font-size: 16px;
        line-height: 24px;
        text-align: left;
        position: relative;
        border-bottom: 1px solid @c-235;
        &:active::before {
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          opacity: .1;
        }
        &::before {
          background-color: #000;
          content: " ";
          opacity: 0;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          position: absolute;
        }
        &::after {
          border: 1.5px solid @c-169;
          border-bottom-width: 0;
          border-left-width: 0;
          content: '';
          position: absolute;
          top: 50%;
          right: 20px;
          width: 9px;
          height: 9px;
          transform: translateY(-50%) rotate(45deg);
        }
        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
      }
      .info {
        &:extend(.flex);
        .item {
          flex: 0 0 auto;
          width: 42.5%;
          padding: 3.5%;
          span {
            display: block;
            font-size: 12px;
            line-height: 24px;
            color: @c-124;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.money {
              font-size: 24px;
              line-height: 32px;
              color: @c-red;
              &::before {
                content: '¥';
                font-size: 14px;
                line-height: 14px;
                margin-right: 1px;
              }
            }
          }
        }
        .v-line {
          width: 1px;
          height: 40px;
          background-color: @c-226;
        }
      }
    }
    .mint-navbar {
      border-bottom: 1px solid @c-226;
      .mint-tab-item {
        padding: 12px 0;
        color: @c-169;
        &.is-selected {
          border-bottom: 1px solid @c-blue;
          color: @c-blue;
          margin-bottom: -1px;
        }
        .mint-tab-item-label {
          font-size: 15px;
          font-weight: 500;
          line-height: 24px;
        }
      }
    }
    .mint-tab-container {
      .mint-tab-container-wrap {
        .mint-tab-container-item {
          &:extend(.flex);
          .item {
            flex: 1;
            text-align: center;
            position: relative;
            padding: 8px;
            img {
              width: 48px;
              height: 48px;
              display: block;
              margin: 0 auto;
            }
            .name {
              font-size: 12px;
              line-height: 24px;
              color: @c-124;
            }
            .mint-badge {
              position: absolute;
              width: 8px;
              right: 25px;
              width: 21px;
              height: 16px;
              border-radius: 16px;
              font-size: 12px;
              line-height: 16px;
              color: #FFF;
              padding: 0;
              margin: 0;
            }
          }
        }
      }
    }
    .line {
      height: 8px;
      background-color: @c-235;
    }
    .mint-cell {
      &::after {
        content: '';
        width: 100%;
        height: 1px;
        background-color: @c-235;
        display: block;
        margin-left: 12px;
      }
      .mint-cell-wrapper {
        color: @c-124;
        font-size: 16px;
        line-height: 24px;
        .mint-cell-title {
          .mint-cell-text {
            font-size: 16px;
            line-height: 24px;
            color: @c-124;
          }
          img {
            width: 24px;
            height: 24px;
          }
        }
        .mint-cell-value {
          font-size: 13px;
          line-height: 24px;
          color: @c-124;
        }
        .mint-cell-allow-right {
          &::after {
            width: 9px;
            height: 9px;
          }
        }
      }
    }
    // popup层
    .mint-popup {
      width: 70vw;
      height: 80vh;
      overflow: hidden;
      border-radius: 20px;
      .block {
        color: @c-124;
        font-size: 11px;
        line-height: 24px;
        padding: 10px 15px 10px;
        height: calc(~'100% - 68px');
        overflow-y: scroll;
        .title {
          font-size: 14px;
          margin: 0 -15px 0;
          padding-bottom: 12px;
          text-align: center;
          border-bottom: 1px solid @c-226;
        }
        .text {
          font-size: 12px;
          margin: 10px 0;
        }
        h3, table {
          text-align: center;
          border-radius: 8px;
          border: 1px solid #E5D4A6;
          td {
            height: 24px;
            border-bottom: 1px solid #E5D4A6;
            border-right: 1px solid #E5D4A6;
            &:last-child {
              border-right: 0;
            }
          }
          tr:last-child {
            td {
              border-bottom: 0;
            }
          }
        }
        .report-card {
          margin: 0 -15px 10px;
          box-shadow: 0 2px 7px 1px rgba(97, 125, 147, 0.25);
          overflow: hidden;
          .card-head {
            display: flex;
            justify-content: space-between;
            margin: 0 14px;
            padding: 6px 6px; 
            border-bottom: 1px solid @c-235;
            span {
              flex: 0 0 auto;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &.time {
                width: 30%;
              }
              &.word {
                width: 70%;
                text-align: right;
              }
            }
          }
          .card-footer {
            padding: 6px 20px;
            font-weight: bold;
          }
        }
      }
      .mint-button {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin-top: 10px;
        color: @c-blue;
        font-size: 14px;
        line-height: 24px;
        border-top: 1px solid @c-235;
        background-color: #FFF;
      }
    }
  }
</style>